<template>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="name" label="物资用途" prop="materialUse">
              <a-input v-model="form.materialUse" placeholder="请输入" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="name" label="调用时间" prop="callTime">

              <a-date-picker
                @change="onChange1"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                show-time/>
            </a-form-model-item>
          </a-col>
        </a-row>



        <div class="list" style="display: flex;position:relative;">
          <a-form-model-item ref="name" label="物资调用" prop="a">
            <div style="position:absolute;top:-39px;left: 84px;font-weight: 1000;width: 200px">
              <span>已选</span><span style="color: red">{{this.sum}}</span><span>条</span>
            </div>
            <div style="width: 100%;">
              <a-table :columns="columns" :data-source="data"
                ref="table"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                @change="onTableChange"
              >
                <template slot="callsNumber" slot-scope="text, record">
                  <editable-cell :text="text" :editable="record.modify" @change="onCellChange(record.id, 'callsNumber', $event)" />
                </template>
              </a-table>
            </div>
          </a-form-model-item>
        </div>

      </a-form-model>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import { getfrom } from '@api/xlgc/lawCase'
import { detailsList, resCreate ,transfer} from '@api/xlgc/Res'
import CustomTable from '@/components/zxd/Table/CustomTable'

import EditableCell from '@views/xlgc/Res/EditableCell'

export default {
  name: 'addRes',
  components: { Box , CustomTable , EditableCell},

  data() {
    return {
      sum:0,
      selectedRowKeys: [],
      selectedRowKeys1: [],
      data:[],
      pageFilter:{
        pageNo:1,
        pageSize:10
      },
      columns:[
        {
          title: '序号',
          dataIndex: 'index',
          key:'index',
          align: 'center',
          // customRender: (text, record, index) =>
          //   `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '物资名称',
          dataIndex: 'materialName',
          key:'materialName',
          width:'20%',
          scopedSlots: { customRender: 'materialName' },
        },
        {
          title: '物资品牌',
          dataIndex: 'materialBrand',
          key:'materialBrand',
          width:'20%',
          scopedSlots: { customRender: 'materialBrand' },
        },
        {
          title: '库存',
          dataIndex: 'stock',
          key:'stock',
          width:'20%',
          scopedSlots: { customRender: 'stock' },
        },
        {
          title: '调用数量',
          dataIndex: 'callsNumber',
          key:'callsNumber',
          width:'20%',
          scopedSlots: { customRender: 'callsNumber' },
        },
      ],
      editingKey: '',
      visible: false,
      fileList: [],
      labelCol: { span: 2 },
      wrapperCol: { span: 6 },
      diqu: {},
      other: '',
      form: {
        callTime:'',
        materialId:'',
        materialUse:'',
        storageLocation:''
      },
      count:1,
      rules: {
        materialUse: [{ required: true, message: '请输入', trigger: 'blur' }],
        callTime: [{ required: true, message: '请选择', trigger: 'change' }],
        a: [{ required: true, message: '', trigger: 'blur' }],
      },
      passCheck: false,
      pass:false
    }
  },
  props:{
    id:Number,
    text: String,
    storageLocation:String
  },
  mounted() {
    getfrom()
      .then(res => {
        console.log(res)
        this.diqu = res.result
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })


  },
  watch:{
    id:{
      immediate: true,
      handler(){
        this.detailsList()
      }
    }
  },
  methods: {
    onCellChange(key, dataIndex, value) {
      console.log(key,dataIndex,value)
      const dataSource = [...this.data];
      const target = dataSource.find(item => item.id === key);
      console.log(target)
      if (target) {
        target[dataIndex] = value;
        this.data = dataSource;
      }


    },
    onSelectChange(selectedRowKeys,item) {
      console.log('selectedRowKeys changed: ', selectedRowKeys,item);
      // if(!item[item.length].callsNumber){
      //   this.$message.error('请输入你要调用的数量', 3)
      // }
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRowKeys1 = item;
      this.sum = selectedRowKeys.length

    },
    detailsList(){
      console.log(this.id)
      detailsList({id:this.id}).then(response => {
        console.log(response)
        this.data = response.result
        for(let a=0;a<=this.data.length;a++){
          this.data[a].index = a+1
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onTableChange(pagination, pageFilter, sorter) {
      console.log(pagination,pageFilter,sorter)
      console.log(this.data);
      for(let item of this.data){
        item.modify = false
      }
      // let keyMap = { currentPage: 'pageNo' }
      // let paginations = Object.keys(pagination).reduce((newData, key) => {
      //   let newKey = keyMap[key] || key
      //   newData[newKey] = pagination[key]
      //   return newData
      // }, {})
      // this.pageFilter = Object.assign({}, this.pageFilter, paginations)

    },
    onChange1(date, dateString) {
      console.log(date, dateString);
      this.form.callTime = dateString
    },
    uploads(){
      this.$router.push({
        path: '/listIndex',
      })
    },
    //规整所有数据传回父组件
    planning(){
      let arr = []
      for(let item of this.selectedRowKeys1){
        arr.push({
          callsNumber:Number(item.callsNumber),
          materialBrand:item.materialBrand,
          materialName:item.materialName,
          unit:item.unit
        })
      }
      let data = {
        callTime:this.form.callTime,
        materialId:this.id,
        materialUse:this.form.materialUse,
        storageLocation:this.storageLocation
      }
      console.log({information:data,transfers:this.selectedRowKeys})
      // this.$emit('objData',{information:data,transfers:arr})
      transfer({information:data,transfers:arr}).then(res => {
        console.log(res)
        this.$emit('objData',res.success)
        if(res.success){
          this.$message.success(res.message, 2,);
        }else{
          this.$message.warn(res.message, 5,)
        }
      }).catch(error => {
        this.$message.warn('请求失败！')
        console.log(error)
      })
    }

  },
}
</script>

<style scoped>
.list {
  display: flex;
  flex-direction: column;
}

/deep/ .list .ant-form-item-control-wrapper {
  width: 100% !important;
}

/deep/ .list .ant-col-2 {
  width: 83px !important;
}
.editable-row-operations a {
  margin-right: 8px;
}
/deep/.ant-table-footer{
  display: flex;
  justify-content: center;
}
/deep/.ant-col-2{
  width: 17.333333%;
}
/deep/.ant-col-6{
  width: 70% !important;
}
</style>